<!-- 菜单管理 -->
<template>
<com-drawer class="menu-info-wp" v-model="visible" :title="title">
  <el-form class="this-form" ref="form" :model="form" :rules="rules" label-width="10em" label-position="right" size="medium">
    <el-form-item label="菜单类型：" prop="menuType">
      <el-radio-group v-model="form.menuType">
        <el-radio v-for="(item, index) in $store.state.dict.menuType" :key="index"
        :label="item.value">{{item.label}}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item :label="menuName + '：'" prop="name">
      <el-input v-model="form.name" :placeholder="'请输入' + menuName"></el-input>
    </el-form-item>
    <el-form-item v-if="form.menuType != 0" label="上级菜单：" prop="parentId">
      <my-select-tree v-model="form.parentId" :options="menuList" labelKey="name" valueKey="id"></my-select-tree>
    </el-form-item>
    <el-form-item label="菜单路径：" prop="url" :rules="form.menuType != 2 ? rules.url : {}">
      <el-input v-model="form.url" placeholder="请输入菜单路径"></el-input>
    </el-form-item>
    <template v-if="form.menuType != 2">
      <el-form-item label="前端组件：" prop="component">
        <el-input v-model="form.component" placeholder="请输入前端组件"></el-input>
      </el-form-item>
      <el-form-item label="默认跳转地址：" prop="redirect">
        <el-input v-model="form.redirect" placeholder="请输入路由参数 redirect"></el-input>
      </el-form-item>
      <el-form-item label="菜单图标：" prop="icon">
        <el-input v-model="form.icon" placeholder="请选择菜单图标">
          <el-button slot="append" icon="el-icon-setting" @click="$refs.showIcon.open(form.icon)"></el-button>
        </el-input>
      </el-form-item>
      <el-form-item label="排序：" prop="sortNo">
        <el-input-number v-model="form.sortNo" :min="1" controls-position="right" placeholder="请输入序号"></el-input-number>
      </el-form-item>
      <el-form-item label="是否路由菜单：" prop="route">
        <el-radio-group size="mini" v-model="form.route">
          <el-radio-button :label="false">否</el-radio-button>
          <el-radio-button :label="true">是</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="隐藏路由：" prop="hidden">
        <el-radio-group size="mini" v-model="form.hidden">
          <el-radio-button :label="false">否</el-radio-button>
          <el-radio-button :label="true">是</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否缓存路由：" prop="keepAlive">
        <el-radio-group size="mini" v-model="form.keepAlive">
          <el-radio-button :label="false">否</el-radio-button>
          <el-radio-button :label="true">是</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="打开方式：" prop="internalOrExternal">
        <el-radio-group size="mini" v-model="form.internalOrExternal">
          <el-radio-button :label="false">内部</el-radio-button>
          <el-radio-button :label="true">外部</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </template>
    <template v-else>
      <el-form-item label="授权标识：" prop="perms">
        <el-input v-model="form.perms" placeholder="多个用逗号分隔，如：user:list,user:create"></el-input>
      </el-form-item>
      <el-form-item label="授权策略：" prop="permsType">
        <el-radio-group size="mini" v-model="form.permsType">
          <div class="break-radio" v-for="(item, index) in $store.state.dict.globalPermsType" :key="index">
            <el-radio :label="item.value">{{item.label}}</el-radio>
          </div>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio-group size="mini" v-model="form.status">
          <el-radio-button v-for="(item, index) in $store.state.dict.validStatus" :key="index" :label="item.value">{{item.label}}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </template>
  </el-form>
  <template slot="footer">
    <el-button size="small" @click="visible = false">取 消</el-button>
    <el-button size="small" type="primary" @click="submit()" :loading="btnLoading">{{ btnLoading ? '提交中 ...' : '确 定' }}</el-button>
  </template>

  <!-- icon选择弹窗 -->
  <show-icon ref="showIcon" @change="(val) => {form.icon = val}"></show-icon>
</com-drawer>
</template>
<script>

import showIcon from "@/dialogs/system/menu/show-icon.vue";
import {permission} from "@/config/api.js";

export default {
  components: {
    showIcon,
  },
  data () {
    return {
      visible: false,
      btnLoading: false,

      type: 1, // 类型 1-新增，2编辑，3详情，4添加子菜单
      detail: {}, // 当前详情

      defaultForm: {
        menuType: 0,
        sortNo: 1,
        route: true,
        hidden: false,
        keepAlive: false,
        internalOrExternal: false,
        permsType: 1,
        status: 1,
      },

      form: {
        menuType: '', // 菜单类型
        name: '', // 菜单名称
        parentId: '', // 上级菜单id
        url: '', // 菜单路径
        component: '', // 前端组件
        redirect: '', // 默认跳转地址
        icon: '', // 菜单图标
        sortNo: '', // 排序
        route: '', // 是否路由菜单
        hidden: '', // 隐藏路由
        keepAlive: '', // 是否缓存路由
        internalOrExternal: '', // 打开方式
        perms: '', // 授权标识
        permsType: '', // 授权策略
        status: '', // 状态
      },

      // 验证规则
      rules: {
        name: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        parentId: [
          { required: true, message: "请选择上级菜单", trigger: "blur" },
        ],
        url: [
          { required: true, message: "请输入菜单路径", trigger: "blur" },
        ],
        component: [
          { required: true, message: "请输入前端组件", trigger: "blur" },
        ],
      }

    }
  },
  props: {
    // 菜单列表
    menuList: {
      default () {
        return []
      }
    },
  },
  computed: {
    // 标题
    title () {
      var res = '';
      switch (this.type) {
        case 1: res = '新增'; break;
        case 2: res = '修改'; break;
        case 3: res = '详情'; break;
        case 4: res = '添加子菜单'; break;
      }
      return res;
    },

    // 类型名称
    menuName () {
      return this.form.menuType == 2 ? '按钮/权限名称' : '菜单名称';
    }
  },
  methods: {
    open (type, detail) {
      this.type = type;
      this.detail = detail;

      this.initForm(); // 设置表单

      this.visible = true;
    },

    // 提交
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        
        var param = this.$g.copy(this.form);
        var url = '';
        // 添加
        if (this.type == 1 || this.type == 4) {
          url = permission.add;
        // 修改
        } else {
          param.id = this.detail.id;
          url = permission.edit;
        }

        this.btnLoading = true;
        this.$post(url, param).then(res => {
          this.btnLoading = false;
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('reload'); // 更新菜单
            this.visible = false;
          }
        })
      })
    },

    // 设置表单
    initForm (type) {
      if (this.type == 1 || this.type == 4) {
        for (var key in this.form) {
          if (key == 'menuType') {
            this.form[key] = this.type == 1 ? 0 : 1;
          } else if (this.type == 4 && key == 'parentId') {
            this.form[key] = this.detail.id;
          } else if (key in this.defaultForm) {
            this.form[key] = this.defaultForm[key];
          } else {
            this.form[key] = '';
          }
        }
      } else {
        for (var key in this.form) {
          this.form[key] = this.detail[key];
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.menu-info-wp {
  .this-form {
    padding-right: 5em;

    .break-radio + .break-radio {
      margin-top: 10px;
    }
  }
}
</style>